<template>
    <div class="other-info-page">
        <van-field name="wugong_radio" label="是否集中住宿务工人员" :rules="[{ required: true, message: '请选择是否集中住宿务工人员' }]">
            <template #input>
                <van-radio-group v-model="formItem.wugong_radio" @change="radioWuGongAction" direction="horizontal">
                    <van-radio name="1" icon-size="18px">是</van-radio>
                    <van-radio name="0" icon-size="18px">否</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <van-field name="zaixiao_radio" label="是否集中住宿在校学生" :rules="[{ required: true, message: '请选择是否集中住宿在校学生' }]">
            <template #input>
                <van-radio-group v-model="formItem.zaixiao_radio" @change="radioZaiXiaoAction" direction="horizontal">
                    <van-radio name="1" icon-size="18px">是</van-radio>
                    <van-radio name="0" icon-size="18px">否</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <van-field name="jiudian_radio" label="是否宾馆酒店住宿客人" :rules="[{ required: true, message: '请选择是否宾馆酒店住宿客人' }]">
            <template #input>
                <van-radio-group v-model="formItem.jiudian_radio" @change="radioJiuDianAction" direction="horizontal">
                    <van-radio name="1" icon-size="18px">是</van-radio>
                    <van-radio name="0" icon-size="18px">否</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <template
                v-if="formItem.wugong_radio === '1' || formItem.zaixiao_radio === '1' || formItem.jiudian_radio === '1'">
            <van-field v-model="formItem.concentration_type_remark"
                       name="concentration_type_remark"
                       :maxlength="30"
                       @focus="bodyScrollTop"
                        @blur="bodyScrollTop"
                       :label="concentrationName"/>
        </template>
    </div>
</template>

<script>

export default {
  name: 'OtherInfo',
  data () {
    return {
      formItem: {
        wugong_radio: '',
        zaixiao_radio: '',
        jiudian_radio: '',
        concentration_type_remark: ''
      },
      showArea: false
    }
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    concentrationName () {
      let name = ''
      if (this.formItem.wugong_radio === '1') {
        name = '企业名称'
      } else if (this.formItem.zaixiao_radio === '1') {
        name = '学校名称'
      } else if (this.formItem.jiudian_radio === '1') {
        name = '宾馆酒店名称'
      }
      return name
    }
  },
  methods: {
    bodyScrollTop () {
      document.body && (document.body.scrollTop = 0)
      this.setStorage(this.formItem)
    },
    setStorage (formData) {
      window.localStorage.setItem('formData', JSON.stringify(formData))
    },
    radioWuGongAction (data) {
      if (data === '1') {
        this.formItem.jiudian_radio = '0'
        this.formItem.zaixiao_radio = '0'
      }
    },
    radioZaiXiaoAction (data) {
      if (data === '1') {
        this.formItem.wugong_radio = '0'
        this.formItem.jiudian_radio = '0'
      }
    },
    radioJiuDianAction (data) {
      if (data === '1') {
        this.formItem.wugong_radio = '0'
        this.formItem.zaixiao_radio = '0'
      }
    },
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    checkForm () {
      let obj = {}
      if (this.formItem.wugong_radio === '') {
        this.failNotice('请选择是否集中务工人员')
        return false
      }
      if (this.formItem.zaixiao_radio === '') {
        this.failNotice('请选择是否集中住宿在校学生')
        return false
      }
      if (this.formItem.jiudian_radio === '') {
        this.failNotice('请选择是否宾馆酒店住宿客人')
        return false
      }
      if (this.formItem.wugong_radio === '1' || this.formItem.zaixiao_radio === '1' || this.formItem.jiudian_radio === '1') {
        if (this.formItem.concentration_type_remark === '') {
          this.failNotice('请填写' + this.concentrationName)
          return false
        }
        obj = { check: 1, title: this.formItem.concentration_type_remark }
      } else {
        obj = {
          check: 0,
          title: ''
        }
      }
      return obj
    },
    autoHandle () {
      switch (this.formData.concentration_type) {
        case '1':
          this.formItem.wugong_radio = '1'
          this.formItem.zaixiao_radio = '0'
          this.formItem.jiudian_radio = '0'
          this.formItem.concentration_type_remark = this.formData.concentration_type_remark
          break
        case '2':
          this.formItem.wugong_radio = '0'
          this.formItem.zaixiao_radio = '1'
          this.formItem.jiudian_radio = '0'
          this.formItem.concentration_type_remark = this.formData.concentration_type_remark
          break
        case '3':
          this.formItem.wugong_radio = '0'
          this.formItem.zaixiao_radio = '0'
          this.formItem.jiudian_radio = '1'
          this.formItem.concentration_type_remark = this.formData.concentration_type_remark
          break
        case '0':
          this.formItem.wugong_radio = '0'
          this.formItem.zaixiao_radio = '0'
          this.formItem.jiudian_radio = '0'
          this.formItem.concentration_type_remark = this.formData.concentration_type_remark
          break
      }
    }
  },
  watch: {
    formData (val) {
      this.autoHandle()
      console.log('其它信息组件内部表单`', this.formItem)
    }
  }
}
</script>

<style scoped>
    .other-info-page >>> .van-field__label {
        min-width: 5.625rem;
        margin-right: 10px;
        width: auto;
    }
</style>
